<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'
import { gsap } from 'gsap'

const appRef = ref(null)
const navRef = ref(null)

onMounted(() => {
  // 页面加载动画
  gsap.from(appRef.value, {
    opacity: 0,
    duration: 1,
    ease: 'power2.out'
  })

  // 导航栏动画
  gsap.from(navRef.value, {
    y: -50,
    opacity: 0,
    duration: 0.8,
    delay: 0.3,
    ease: 'back.out(1.7)'
  })
})
</script>

<template>
  <div class="app" ref="appRef">
    <header ref="navRef">
      <nav>
        <RouterLink to="/" class="logo">我的相册</RouterLink>
        <div class="nav-links">
          <RouterLink to="/">首页</RouterLink>
          <RouterLink to="/gallery">相册</RouterLink>
        </div>
      </nav>
    </header>

    <main>
      <RouterView v-slot="{ Component }">
        <transition name="page" mode="out-in">
          <component :is="Component" />
        </transition>
      </RouterView>
    </main>
  </div>
</template>

<style>
@import './assets/base.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  background-color: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
}


#app {
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-heading);
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  position: relative;
  color: var(--color-text);
  font-weight: 500;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: hsla(160, 100%, 37%, 1);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.router-link-active::after {
  width: 100%;
}

main {
  flex: 1;
  padding-top: 80px;
  width: 100vw;
}

/* 页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

@media (max-width: 768px) {
  nav {
    padding: 1rem;
  }

  .nav-links {
    gap: 1rem;
  }
}
</style>
